<template>
	<view class="boxTop">
		<view>
			<u-sticky>
				<u-dropdown class="container" style="width: 100vw;" height="100rpx" open="getOffsetTop">
					<u-dropdown-item v-model="value1" title="距离" :options="options1"
						@change="getFilter"></u-dropdown-item>
					<u-dropdown-item v-model="value2" title="全部分类" :options="options2"
						@change="getFilter"></u-dropdown-item>
					<!-- <u-dropdown-item v-model="value3" title="智能排序" :options="options3"
						@change="getFilter"></u-dropdown-item> -->
				</u-dropdown>
			</u-sticky>
		</view>

		<view class="box" v-for="ele in goodsList" :key="ele._id" @click="getDatails(ele._id)">
			<p style="height: 80%;width: 20%;margin: 0.5rem;box-sizing: border-box;">
				<u-image :src="ele.shop_img" mode="scaleToFill" height="5rem" width="5rem"></u-image>
			</p>
			<p style="font-size: 35rpx;color: white;" class="demo">{{ele.shopname}}</p>
			<p style="display: flex;">
				<span>{{ele.stresst}}</span>
				<span>|</span>
				<span>{{ele.type}}</span>
			</p>
			<p style="display: flex;justify-content: space-between;color: white;">
				<span>营业时间:{{ele.time}}</span>
				<span>{{ele.distance}} km</span>
			</p>
			<p style="
			background-color: #252b3a;
				display: flex;
				align-items: center;
				color: white;
				font-size: 30rpx;
				margin-bottom: 0.1rem;
				height: 17%;">
				<u-icon name="bag-fill" color="red" style="margin:0.5rem ;"></u-icon>
				<span>{{ele.type}}</span>
			</p>
		</view>
	</view>

</template>

<script setup lang="ts">
	import { ref, onMounted, defineEmits } from "vue";
	import Map from './Map.vue';
	const value1 = ref("0-1KM");
	const value2 = ref("不限");
	const value3 = ref("智能排序");

	const getOffsetTop = () => {
		// 点击吸顶
		uni.pageScrollTo({
			scrollTop: 1000,// 滚动到页面的目标位置（单位px）
			duration: 800// 滚动动画的时长，单位ms
		});
		// 获取吸顶元素距离顶部的距离
		uni.createSelectorQuery().select(".sticky").boundingClientRect((data) => {
			console.log(data);
		}).exec();
		// 获取页面滚动距离
		uni.createSelectorQuery().selectViewport().scrollOffset((data) => {
			console.log(data);
		}).exec();
	};

	//跳转到详情页面
	const getDatails = (id : any) => {
		uni.navigateTo({
			url: '/pages/Find/Happy/Datails/Datails?id=' + id
		})
	};

	//获取星系商品信息
	const props = defineProps({
		goodsList: {
			type: Array,
			default: () => []
		},
		options1: {
			type: Array,
			default: () => []
		},
		options2: {
			type: Array,
			default: () => []
		},
		options3: {
			type: Array,
			default: () => []
		},
		getFilterList: {
			type: Function,
			default: () => { }
		}
	});
	
	const emit = defineEmits(['getFilterList'])

	const getFilter = () => {
		emit('getFilterList', value1.value, value2.value, value3.value)
	}
</script>

<style lang="scss">
	.boxTop {
		width: 100%;
		height: 100vh;
		background-color: #1e2128;
	}

	.container {
		width: 100%;
		height: 20%;
		background-color: black;
	}


	.box {
		width: 100%;
		height: 300rpx;
		background-color: #1e2128;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		margin-bottom: 0.1rem;
		padding-top: 1rem;

		p {
			width: 60%;
			height: 25%;
			display: flex;
			line-height: 2rem;
			font-size: 20rpx;
			color: silver;
			white-space: nowrap;
			/* 防止文本换行 */
			overflow: hidden;
			/* 隐藏溢出的文本 */
			text-overflow: ellipsis;

			/* 溢出部分用省略号代替 */
			span {
				margin-right: 5%;
			}
		}
	}
</style>